<!--
 * @Author: chen qi
 * @Date: 2022-07-09 00:31:08
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-12 14:59:30
 * @Description:
-->
<template>
  <div
    :ref="`pie${id}`"
    class="pie-chart"
  ></div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: 'pieChart',
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    data: {
      type: Array,
      default: () => {
        return [
          {
            name: '行业一',
            value: '10000'
          },
          {
            name: '行业二',
            value: '50000'
          },
          {
            name: '行业三',
            value: '60000'
          },
          {
            name: '行业四',
            value: '70000'
          },
          {
            name: '行业五',
            value: '70000'
          }
        ]
      }
    }
  },
  data() {
    return {
      resDebounce: null,
      chart: null, // chart实例,
      option:
      {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{a}<br>{b}: {c} ({d}%)'
        // },
        legend: {
          orient: 'vertical',
          top: 'middle',
          right: '5%',
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#333'
          },
          selectedMode: false
        },
        series: [
          {
            name: '本年度商户行业统计',
            type: 'pie',
            radius: ['60%', '70%'],
            right: 0,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: (a, b) => {
                return `{a|${a.name}}\n{b|(${(a.value).toString().replace(/(?!^)(?=(\d{3})+$)/g, ',')})}`
              },
              rich: {
                a: {
                  fontSize: 15
                  // color: '#333'
                },
                b: {
                  fontSize: 20,
                  color: '#fff'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '15',
                  fontWeight: 'bold'
                }
              }
            },
            emphasis: {
              scale: true,
              scaleSize: 5
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs[`pie${this.id}`])
    this.chart.setOption(this.option)
    this.$nextTick(() => {
      var count = 0
      var timeTicket = null
      var dataLength = this.option.series[0].data.length
      timeTicket && clearInterval(timeTicket)
      timeTicket = setInterval(() => {
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        })
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: count % dataLength
        })
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: count % dataLength
        })
        count++
      }, 1000)
      this.chart.on('mouseover', (params) => {
        clearInterval(timeTicket)
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        })
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
      })
      this.chart.on('mouseout', (params) => {
        timeTicket && clearInterval(timeTicket)
        timeTicket = setInterval(() => {
          this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
          })
          this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: count % dataLength
          })
          this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: count % dataLength
          })
          count++
        }, 1000)
      })
    })
    this.resDebounce = this.debounce(this.chart.resize, 300)
    window.addEventListener('resize', this.resDebounce)
  },
  destroyed() {
    window.addEventListener('resize', this.resDebounce)
  }

}
</script>

<style lang="less" scoped>
.pie-chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
